iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0

在 Javascript 中會用 onclick, onchange...等方式監聽 DOM 物件,而 Vue 則是在 HTML 的標籤裡面加上 v-on 就可以做事件綁定,馬上來練習該怎麼使用吧。


JS 範例程式碼

同樣的,先寫一段 JS 範例,下面不再重複撰寫

const vm = Vue.createApp({
  data () {
    return {
      num: 0,
      text: '',
    }
  },
  methods: {
    addOne () {
      this.num++;
    },
    changeNum(n) {
      this.num = n;
    }
  }
}).mount('#app');

v-on

Vue 的事件綁定寫法是在 HTML 標籤裡面加上 v-on:使用者行為="執行程式",可以直接寫程式碼,或是呼叫函式;除此之外,v-on: 也能簡寫成一個 @,非常簡潔方便:

  1. 直接在標籤內執行程式碼。

    <p>一共點了 {{ num }} 下</p>
    <button v-on:click="num++"></button>
    
  2. 呼叫函式。

    <p>一共點了 {{ num }} 下</p>
    <button v-on:click="addOne"></button>
    
  3. 簡寫方式

    <p>一共點了 {{ num }} 下</p>
    <button @click="addOne"></button>
    

v-on & 修飾子

在處理事件時,時常會用到 preventDefault, stopPropagation...等等方法,Vue 提供了修飾子快速達成需要的功能。

  1. .stop
    等同於 stopPropagation,下面這段程式碼在點擊 "show 2" 的文字後 num 會變成 2,而不會變成 1。
    <div @click="changeNum(1)">
      <p>num: {{ num }} </p>
      <div @click.stop="changeNum(2)">show 2</div>
    </div>
    
  2. .prevent
    等同於 preventDefault,最常用在超連結上。
    <a href="#" @click.prevent="text='prevent'">Prevent</a>
    <p>{{text}}</p>
    
  3. .capture
    capture 會先觸發,所以下面的程式碼點擊後是顯示 2。
    <div @click.capture="changeNum(1)">
      <div @click="changeNum(2)">
        <div @click="changeNum(3)">clickMe!</div>
      </div>
    </div>
    <p>{{num}}</p>
    
  4. .self
    只會觸發自己和外層的元素事件,內層元素不會觸發。
  5. .once
    只會觸發一次,之後都不會再觸發事件。
  6. .passive
    .passive 就是 anti-prevent,只要有他在, prevent 就不能作用,主要用來改善 scroll 事件的順暢度。

鍵盤修飾子

  • Vue 提供了各種常用案件的修飾子,列表如下:
    • .enter
    • .tab
    • .delete (Delete & Backspace 都適用)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
    • .ctrl
    • .shift
    • .alt
    • .meta ( Windows 的視窗鍵 || MacOS 的 command 鍵)
  • 功能鍵幾乎都用對應的修飾子,而普通按鍵則是使用對應代碼,以下是官方的範例碼:
    <!-- alt + C -->
    <imput @keyup.alt.67="clear">
    
  • 精確判斷按鍵事件(.exact)
    預設如果同時按下兩個以上按鍵,只要有一個有撰寫事件,就會觸發,如果想避免這個狀況,就在最後加上.exact,這樣只有在按下一樣的按鍵(或組合)的時候才會觸發。

滑鼠修飾子

滑鼠相對簡單多

  • .left
  • .right
  • .middle

上一篇
[Day28] Vue3 - 資料綁定
下一篇
[Day30] Vue3 - 條件判斷
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言